<template>
	<view class="background">
		<view class="message-box" v-for="(item,index) in messageArr" :key="index">
      <view class="left">
        <view style="margin-bottom: 20rpx;flex-direction: row;display: flex;">
          <view style="font-weight: bold;width: 50%;"> {{ item.theme }}</view>
          <view style="font-size: 14px;color: #82848a;"> {{ item.senderName }} | {{ item.sendTime.slice(0,10) }}</view>
        </view>
        <view style="color: #606266;font-size: 15px;"> {{ item.content }} </view>
      </view>
      <view class="right">
        <view class="button" @click="deleteMessage(item.id)">删除</view>
      </view>

		</view>

	</view>
</template>

<script>
import student from '@/api/student/index.js'
import store from '@/store'
	export default {
		data() {
			return {
				messageArr:[]
			}
		},
		
		methods: {
      async getMyMessage() {
        try {
          const res = await student.stuGetMessages()
          this.messageArr = res.data
          console.log(this.messageArr)
        } catch (e) {
          console.log(e)
        }
      },
      async deleteMessage(id) {
        try {
          const res = await student.stuDeleteMessages(id)
          if (res.code == 200) {
            uni.showToast({
              title: res.data,
              icon: 'success', // 可选值：'success', 'loading', 'none'
              duration: 2000, // 显示时长，单位为毫秒
              mask: true
            });
            await this.getMyMessage()
          }
          else {
            uni.showToast({
              title: res.data,
              icon: 'none', // 可选值：'success', 'loading', 'none'
              duration: 2000, // 显示时长，单位为毫秒
              mask: true // 是否显示透明蒙层
            });
          }
        } catch (e) {
          console.log(e)
        }
      },
		},
    async onLoad() {
      await this.getMyMessage()
    }
	}
</script>

<style>
.background {
  height: 100vh; /* 使背景占满整个视口高度 */
  width: 100%;
  background: linear-gradient(to bottom, #DCE3F8, #FFFFFF); /* 从淡蓝色到灰色的渐变 */
}
.message-box {
  padding: 20px;
  flex-direction: row; /* 使子元素垂直排列 */
  display: flex;
  height: 120rpx;
}
.left {
  padding-left: 10rpx;
  width:84%;
}
.right {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 16%;
  font-size: 13px;
  color: #82848a;
}
</style>
